<template>

	<div>

		<div class="header-search">

			<el-form size="mini" :inline="true" :model="formInline" class="demo-form-inline">
				<el-form-item label="搜索">
					<el-input v-model="formInline.searchcontent" placeholder="用户名"></el-input>
				</el-form-item>

				<el-form-item>
					<el-button type="primary" @click="onSearch">查询</el-button>
				</el-form-item>
			</el-form>

		</div>
		
		<el-table :data="users" style="width: 100%;" :row-class-name="tableRowClassName" @sort-change="sortChange">
			<el-table-column type="selection" width="55">
			</el-table-column>

			<el-table-column fixed prop="useq" label="id" width="75">
			</el-table-column>
			<el-table-column prop="username" label="用户名" width="100">
			</el-table-column>
			<el-table-column prop="nickname" label="昵称" width="100" sortable='custom'>
			</el-table-column>
			<el-table-column prop="mobile" label="手机号" width="160" :show-overflow-tooltip='true'>
			</el-table-column>
			<el-table-column prop="gender" label="性别" width="100">
			</el-table-column>
			<el-table-column prop="depart" label="部门" width="80">
			</el-table-column>
			<el-table-column prop="role" label="角色" width="80">
			</el-table-column>
			<!-- <el-table-column prop="headpic" label="头像" width="80">
			</el-table-column> -->
			
			<el-table-column prop="state" label="状态" width="80">
			</el-table-column>
			

			<el-table-column prop="updatetime" label="更新时间" width="100">
			</el-table-column>
			<el-table-column fixed="right" label="操作" width="120">
				<template slot-scope="scope">
					<el-button @click.native.prevent="detailRow(scope.$index, users)" type="text" size="small">
						详情
					</el-button>
					<el-button @click.native.prevent="deleteRow(scope.$index, users)" type="text" size="small">
						移除
					</el-button>
				</template>
			</el-table-column>
		</el-table>

		<div class="page">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page_no"
				:page-sizes="[5, 8, 10, 20]" :page-size="5" layout="total, sizes, prev, pager, next, jumper"
				:total="total">
			</el-pagination>
		</div>

	</div>
</template>

<script>
	import {
		getUsers
	} from '@/api/user.js'
	// import { mapMutations } from 'vuex'
	export default {
		data() {
			return {
				sort: '',
				column: '',
				page_no: 1,
				page_size: 5,
				total: 0,
				formInline: {
					searchcontent: ''
				},
				users: []
			}
		},
		methods: {
			// ...mapMutations(['saveGoods']),
			sortChange(column) {
				// console.log(column + "-" + column.prop + "-" + column.order);

				// // 升序ascending 降序descending null默认不排序
				// if (column.order == "ascending") {

				// } else if (column.order == "descending") {

				// }
				this.column = column.prop
				this.sort = column.order
				this.getUsers()

			},
			tableRowClassName({
				row,
				rowIndex
			}) {
				if (rowIndex % 2 === 0) {
					return 'warning-row';
				} else if (rowIndex % 2 === 1) {
					return 'success-row';
				}
				return '';
			},
			onSearch() {

				this.page_no = 1
				this.page_size = 5
				this.getUsers()
			},
			handleSizeChange(val) {
				this.page_size = val
				this.getUsers()
			},
			handleCurrentChange(val) {
				this.page_no = val
				this.getUsers()
			},
			async getUsers() {
				await getUsers({
					column: this.column,
					sort: this.sort,
					searchcontent: this.formInline.searchcontent,
					page_no: this.page_no,
					page_size: this.page_size
				}).then((data) => {
					console.log('data', data)
					if (data.status === 200) {
						console.log(data.data.data)
						this.total = data.data.data.total
						this.users = data.data.data.list
					}
				})
			},
			detailRow(index, rows) {
				// let goods = rows[index]
				// console.log('goods',goods) 
				// this.saveGoods(goods)
				// this.$router.push({
				//   path: "/goodsdetail"
				// })
			},
			deleteRow(index, rows) {
				rows.splice(index, 1);
			}

		},
		mounted() {
			this.getUsers()
		}
	}
</script>

<style lang="less" scoped>
	.header-search {
		display: flex;
		justify-content: space-between;

		// align-items: center;
		.add-new {
			margin-top: 2px;
		}
	}

	.el-dropdown-link {
		cursor: pointer;
		color: #409EFF;
	}

	.el-icon-arrow-down {
		font-size: 12px;
	}

	.page {
		text-align: center;
	}

	// .el-table {
	//   padding: 9px 0;
	// }
	/deep/ .el-table .warning-row {
		background: #ffffff;
	}

	/deep/ .el-table .success-row {
		background: #f0f9eb;
	}

	/deep/.el-table td,
	.el-table th {
		padding: 9px 0;
	}
</style>